Function: setSkipLink(domElementOrCSSSelector, objectConfig)

Description: Moves focus to the specified element using a smooth scroll animation.

Returns: domElement, or $A object if chained.

Requires module: "SmoothScroll"

Note: When a skip link references another focusable active element such as a link, the two active elements are automatically bound together, so that activating the referenced link will return focus back to the recently triggered skip link. In this manner, bidirectional footnotes can be automatically configured using the setSkipLink() function. The skipReturn property can be used to manually ignore this functionality. When multiple footnotes reference the same target element, they will automatically track which skip link was used to move focus to that location, after which focus will always return to the most recently used skip link associated with that target.

Configuration

{

  // Optionally specify the target element to move focus to.
  target: '',

  override: {
    // Optionally change the Velocity animation effect properties for sighted users.
    duration: 750,
    easing: "ease-in"
  },

  // Optionally change the context element within which skip link targets will be queried.
  context: document,

  // Optionally override the animation complete handler function.
  callback: function(skipLinkElement, targetElement) {
    // Do something after the visual scroll animation completes.
    // After which, the following statement is required to ensure keyboard accessibility.
    $A.focus(targetElement);
  },

  // Optionally specify that the skip link is positioned offscreen and should only become visible when it receives focus.
  isOffScreen: false,

  // Optionally set the style properties that will be applied when the skip link receives focus and becomes visible.
  // Only applicable when isOffScreen is set to true.
  style: {
    position: "",
    clip: "auto",
    clipPath: "none",
    padding: "",
    height: "",
    width: "",
    overflow: "",
    whiteSpace: "normal"
  },

  // Optionally prevent the target element from from returning focus back to the initial triggering element.
  skipReturn: false

}

Skip Link Syntax

<a href="#idOfElementToMoveToHere" class="aria-skip-link" >Skip to content.</a>

Example:

$A.import("SmoothScroll", { defer: true }, function() {

  // Set a skip link using a DOM element.
  // An array of DOM elements is also supported.
  $A.setSkipLink(domElement);

  // Set a skip link using a CSS selector.
  $A.setSkipLink('a[href^="#"].aria-skip-link');

  // Set a skip link and change configuration options.
  $A.setSkipLink(domElement, {
    isOffScreen: true,
    override: {
      duration: 750,
      easing: "ease-in"
    }
  });

});